/* eslint-disable vue/name-property-casing */
/* eslint-disable quotes */
<template>
  <div class="cs-page-container">
    <el-button v-if="debug" type="primary" @click="editPage">编辑</el-button>
    <div v-if="configData['is_select']" class="cs-filter-container">
      <template v-for="(item, index) in configData['selects']">
        <el-select
          v-if="configData.requests && configData.requests.hasOwnProperty(configData['selectRequest'])"
          :key="index"
          v-model="configData.requests[configData['selectRequest']]._params[item.selectModel]"
          filterable
          clearable
          :placeholder="item['placeholder']"
          style="width:100px"
        >
          <template v-for="(option, idx) in item['options']">
            <el-option
              :key="idx"
              :label="option['name']"
              :value="option['value']"
            />
          </template>
        </el-select>
      </template>
      <el-date-picker
        v-if="configData.requests && configData.requests.hasOwnProperty(configData['selectRequest'])"
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        clearable
        @change="daterangeChanged"
      />
      <el-button
        type="primary"
        icon="el-icon-search"
        :loading="listLoading"
        @click="handleFilter"
      >查询</el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >重置</el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="getDepthData(pageData, configData['tableDataList'])"
        :height="'calc(100vh - 250px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <template v-for="(item, index) in configData['tableColumns']">
          <el-table-column
            :key="index"
            align="center"
            :label="item.label"
          >
            <template slot-scope="{row}">
              <component :is="columnsComponent[item.function]" v-if="item.function" :value="row[item['columnName']]"></component>
              <span v-else-if="item.filter">{{ columnsFilter(item.filter, row[item['columnName']]) }}</span>
              <span v-else>{{ row[item['columnName']] }}</span>
            </template>
          </el-table-column>
        </template>
        <el-table-column
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button v-for="(item, idx) in configData.manipulates" :key="idx" size="mini" :type="item.type" @click="editButton(scope.$index, scope.row)">{{ item.name }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        v-if="configData.hasOwnProperty('paginationItem') && configData.requests && configData.requests.hasOwnProperty(configData['selectRequest'])"
        :current-page="configData.requests[configData['selectRequest']]._params[configData.paginationItem.paginationPage]"
        :limit="configData.requests[configData['selectRequest']]._params[paginationItem.paginationOffset]"
        :total="getDepthData(pageData, configData.paginationItem.paginationTotal)"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChangeOffset"
      />
    </div>
    <el-dialog title="编辑页面" width="80%" :visible.sync="dialogFormVisible">
      <el-form :model="configData">
        <el-form-item label="接口列表">
          <el-button type="primary" size="mini" @click="dialogFormVisible3 = true">添加请求接口</el-button>
          <el-table
            :data="configData['requestNames']"
            border
            fit
            size="small"
            highlight-current-row
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
          >
            <el-table-column
              align="center"
              label="接口名"
            >
              <template slot-scope="{row}">
                <span>{{ row }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="url"
            >
              <template slot-scope="{row}">
                <span>{{ configData.requests[row].url }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="请求方式"
            >
              <template slot-scope="{row}">
                <span>{{ configData.requests[row].model }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="自动请求"
            >
              <template slot-scope="{row}">
                <span>{{ configData.requests[row].isAutoRequest ? '是' : '否' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="url参数"
            >
              <template slot-scope="{row}">
                <span v-for="(item, index) in configData.requests[row].params" :key="index">{{ item.name }}: {{ item.value }}<br></span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="body参数"
            >
              <template slot-scope="{row}">
                <span v-for="(item, index) in configData.requests[row].data" :key="index">{{ item.name }}: {{ item.value }}<br></span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="提示语"
            >
              <template slot-scope="{row}">
                <span>{{ configData.requests[row].message }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="操作"
              width="200px"
            >
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="editRequest(scope)">编辑</el-button>
                <el-button size="mini" type="danger" @click="DeleteRequest(scope.$index, scope)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="筛选搜索">
          <el-select v-model="configData['is_select']" filterable placeholder="是否需要筛选搜索">
            <el-option :label="'需要'" :value="true"></el-option>
            <el-option :label="'不需要'" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <template v-if="configData['is_select']">
          <el-form-item label="筛选接口">
            <el-select v-model="configData['selectRequest']" filterable placeholder="请选择接口">
              <template v-for="(r, rIndex) in configData.requests">
                <el-option :key="rIndex" :label="rIndex" :value="rIndex"></el-option>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="筛选条件">
            <el-button type="primary" size="mini" @click="dialogFormVisible2 = true">添加条件</el-button>
            <el-table
              :data="configData['selects']"
              border
              fit
              size="small"
              highlight-current-row
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
            >
              <el-table-column
                align="center"
                label="筛选名"
              >
                <template slot-scope="{row}">
                  <span>{{ row.label }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="关联数据"
              >
                <template slot-scope="{row}">
                  <span>{{ row.selectModel }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="提示语"
              >
                <template slot-scope="{row}">
                  <span>{{ row.placeholder }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="可选项"
              >
                <template slot-scope="{row}">
                  <span v-for="(item, index) in row.options" :key="index">{{ item.name }}: {{ item.value }}<br></span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="筛选方式"
              >
                <template slot-scope="{row}">
                  <span>{{ row.type === 'select' ? "下拉选择": "手动输入" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="操作"
              >
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" @click="DeleteCol(scope.$index, configData['selects'])">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item label="时间筛选">
            <el-select v-model="configData['time_select']" filterable placeholder="是否需要时间筛选">
              <el-option :label="'需要'" :value="true"></el-option>
              <el-option :label="'不需要'" :value="false"></el-option>
            </el-select>
          </el-form-item>
        </template>
        <el-form-item label="表格字段">
          <el-button type="primary" size="mini" @click="dialogFormVisible1 = true">添加字段</el-button>
          <el-form-item label="表格数据">
            <el-cascader v-model="configData['tableDataList']" :props="tableDataProps"></el-cascader>
            当前选择: {{ configData['tableDataList'] }}
          </el-form-item>
          <el-table
            :data="configData['tableColumns']"
            border
            fit
            size="small"
            highlight-current-row
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
          >
            <el-table-column
              align="center"
              label="字段名"
            >
              <template slot-scope="{row}">
                <span>{{ row.label }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="字段值"
            >
              <template slot-scope="{row}">
                <span>{{ row['columnName'] }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="功能"
            >
              <template slot-scope="{row}">
                <span>{{ row['function'] }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="过滤器"
            >
              <template slot-scope="{row}">
                <span>{{ row['filter'] }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="editField(scope.$index)">编辑</el-button>
                <el-button size="mini" type="danger" @click="DeleteCol(scope.$index, configData['tableColumns'])">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="表格操作">
          <el-button type="primary" size="mini" @click="dialogFormVisible4 = true">添加操作</el-button>
          <el-table
            :data="configData['manipulates']"
            border
            fit
            size="small"
            highlight-current-row
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
          >
            <el-table-column
              align="center"
              label="操作名"
            >
              <template slot-scope="{row}">
                <span>{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="操作类型"
            >
              <template slot-scope="{row}">
                <span>{{ row.type }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="分页展示">
          <el-select v-model="configData['is_pagination']" filterable placeholder="是否需要分页展示">
            <el-option :label="'需要'" :value="true"></el-option>
            <el-option :label="'不需要'" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="configData['is_pagination'] && configData.requests && configData.requests.hasOwnProperty(configData['selectRequest'])" label="分页页面参数">
          <el-select v-model="paginationItem.paginationPage" filterable placeholder="关联页面参数">
            <template v-for="(i, idx) in configData.requests[configData['selectRequest']].params">
              <el-option :key="idx" :label="i.name" :value="i.name"></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item v-if="configData['is_pagination'] && configData.requests && configData.requests.hasOwnProperty(configData['selectRequest'])" label="分页size参数">
          <el-select v-model="paginationItem.paginationOffset" filterable placeholder="关联size参数">
            <template v-for="(i, idx) in configData.requests[configData['selectRequest']].params">
              <el-option :key="idx" :label="i.name" :value="i.name"></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item v-if="configData['is_pagination'] && configData.requests && configData.requests.hasOwnProperty(configData['selectRequest'])" label="绑定total数据">
          <el-cascader v-model="paginationItem.paginationTotal" :props="tableDataProps"></el-cascader>
          当前选择: {{ paginationItem.paginationTotal }}
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatePage">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加字段" :visible.sync="dialogFormVisible1">
      <el-form :model="fieldItem">
        <el-form-item label="字段名" :label-width="'100px'">
          <el-input v-model="fieldItem.label" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="字段值" :label-width="'100px'">
          <el-select v-model="fieldItem['columnName']" filterable placeholder="字段值">
            <el-option
              v-for="(i, idx) in getColumns()"
              :key="idx"
              :label="i.key"
              :value="i.key"
            >
              <span style="float: left">{{ i.key }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ i.value }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="功能" :label-width="'100px'">
          <el-select v-model="fieldItem['function']" filterable clearable placeholder="功能">
            <template v-for="(value, key, idx) in columnsComponent">
              <el-option :key="idx" :label="key" :value="key"></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="过滤器" :label-width="'100px'">
          <el-select v-model="fieldItem['filter']" filterable clearable placeholder="过滤器">
            <template v-for="(value, key, idx) in columnsFilters">
              <el-option :key="idx" :label="key" :value="key"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="addField">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加筛选" :visible.sync="dialogFormVisible2">
      <el-form :model="screenItem">
        <el-form-item label="筛选名" :label-width="'100px'">
          <el-input v-model="screenItem.label" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="提示语" :label-width="'100px'">
          <el-input v-model="screenItem.placeholder" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="关联数据" :label-width="'100px'">
          <el-select v-if="configData.requests && configData.requests[configData['selectRequest']]" v-model="screenItem.selectModel" filterable placeholder="关联数据">
            <template v-for="(i, idx) in configData.requests[configData['selectRequest']].params">
              <el-option :key="idx" :label="i.name" :value="i.name"></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="筛选方式" :label-width="'100px'">
          <el-select v-if="configData.requests && configData.requests[configData['selectRequest']]" v-model="screenItem.selectType" filterable placeholder="筛选方式">
            <el-option label="手动输入" value="input"></el-option>
            <el-option label="下拉选择" value="select"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="screenItem.selectType === 'select'" label="可选项" :label-width="'100px'">
          <template v-for="(item, index) in screenItem.options">
            <div :key="index">
              <el-input
                v-model="screenItem.options[index].name"
                size="small"
                placeholder="请输入选项名"
                style="width: 180px"
              >
              </el-input>
              <el-input
                v-model="screenItem.options[index].value"
                size="small"
                placeholder="请输入选项值"
                style="width: 200px"
              >
              </el-input>
            </div>
          </template>
          <el-button @click="screenItem.options.push({ name: '', value: null })">新增一项</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="addScreen">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加接口" :visible.sync="dialogFormVisible3">
      <el-form :model="requestItem">
        <el-form-item label="url" :label-width="'100px'">
          <el-input v-model="requestItem.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="接口名" :label-width="'100px'">
          <el-input v-model="requestItem.requestName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="url参数" :label-width="'100px'">
          <template v-for="(item, index) in requestItem.params">
            <div :key="index">
              <el-input
                v-model="requestItem.params[index].name"
                size="small"
                placeholder="请输入参数名"
                style="width: 180px"
              >
              </el-input>
              <el-input
                v-model="requestItem.params[index].value"
                size="small"
                placeholder="请输入参数值"
                style="width: 200px"
              >
              </el-input>
            </div>
          </template>
          <el-button @click="requestItem.params.push({ name: '', value: null })">新增一项</el-button>
        </el-form-item>
        <el-form-item label="body参数" :label-width="'100px'">
          <template v-for="(item, index) in requestItem.data">
            <div :key="index">
              <el-input
                v-model="requestItem.data[index].name"
                size="small"
                placeholder="请输入参数名"
                style="width: 180px"
              >
              </el-input>
              <el-input
                v-model="requestItem.data[index].value"
                size="small"
                placeholder="请输入参数值"
                style="width: 200px"
              >
              </el-input>
            </div>
          </template>
          <el-button @click="requestItem.data.push({ name: '', value: null })">新增一项</el-button>
        </el-form-item>
        <el-form-item label="请求方式" :label-width="'100px'">
          <el-select v-model="requestItem.model" filterable placeholder="请求方式">
            <el-option :label="'get'" :value="'get'"></el-option>
            <el-option :label="'post'" :value="'post'"></el-option>
            <el-option :label="'put'" :value="'put'"></el-option>
            <el-option :label="'delete'" :value="'delete'"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="自动请求" :label-width="'100px'">
          <el-select v-model="requestItem.isAutoRequest" filterable placeholder="是否再页面打开时自动请求">
            <el-option :label="'是'" :value="true"></el-option>
            <el-option :label="'否'" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成功提示语" :label-width="'100px'">
          <el-input v-model="requestItem.message" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="addRequests">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加操作" :visible.sync="dialogFormVisible4">
      <el-form :model="manipulateItem">
        <el-form-item label="操作名" :label-width="'100px'">
          <el-input v-model="manipulateItem.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="操作类型" :label-width="'100px'">
          <el-select v-model="manipulateItem.type" filterable placeholder="请选择操作类型">
            <el-option label="主要按钮" value="primary"></el-option>
            <el-option label="警告按钮" value="warning"></el-option>
            <el-option label="危险按钮" value="danger"></el-option>
            <el-option label="成功按钮" value="success"></el-option>
            <el-option label="信息按钮" value="info"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible4 = false">取 消</el-button>
        <el-button type="primary" @click="addManipulate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TablePagination from '@/components/TablePagination'
import accountId from '@/views/auto-page/components/test/accountId';

import {
  xhrGetPageComponent, xhrSetComponent
} from '@/api/page'
import {
  autoRequest
} from '@/api/bx';
import { deepClone, parseTime } from '@/utils';
import { filterVipType, gender, toThousandFilter } from '@/filters';

export default {
  name: 'Test',
  components: { TablePagination, accountId },
  props: {
    componentName: {
      type: String,
      default: ''
    },
    fromId: {
      type: Number,
      default: 0
    },
    debug: { // 是否处于调试状态
      type: Boolean,
      default: false
    },
    pid: {
      type: Number,
      default: 0
    }
  },

  data() {
    return {
      daterangeValue: '',
      listLoading: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      dialogFormVisible4: false,
      configData: {},
      tableDataList: [],
      fieldItem: { label: '', columnName: '', function: null, filter: null },
      screenItem: { selectModel: '', placeholder: '', label: '', options: [] },
      paginationItem: { paginationPage: '', paginationOffset: '', paginationTotal: '' },
      requestItem: { url: '', model: '', params: [], data: [], isAutoRequest: null, message: '', requestName: '', _params: {}, _data: {}},
      manipulateItem: {},
      pageData: {},
      tableDataProps: {
        lazy: true,
        lazyLoad: this.lazyLoad
      },
      timeChange: [
        { name: '日期格式', value: this.daterangeChangedTimestamp },
        { name: '时间搓格式', value: this.daterangeChanged }
      ],
      columnsComponent: {
        '用户id': 'accountId'
      },
      columnsFilters: {
        '性别过滤': gender,
        '时间过滤': parseTime,
        'vip': filterVipType,
        // '数字格式化 列: 10000 => 10k': numberFormatter,
        '数字格式化 列: 10000 => "10,000"': toThousandFilter
      }
    }
  },
  created() {
    this.pageId = this.$route.meta.pageId
    this.loadPage()
    this.doSearch()
    this.autoRequest()
    if (this.configData.paginationItem) {
      this.paginationItem = this.configData.paginationItem
    }
  },
  methods: {
    doSearch: function() {
      this.listLoading = true
      console.log(this.configData['selectRequest'])
      if (this.configData.requests && this.configData.requests.hasOwnProperty(this.configData['selectRequest'])) {
        console.log(this.configData.requests[this.configData['selectRequest']])
        this.sendRequest(this.configData.requests[this.configData['selectRequest']])
        this.listLoading = false
      } else {
        this.listLoading = false
      }
    },
    lazyLoad: function(node, resolve) {
      console.log(node)
      console.log(this.pageData)
      const nodes = []
      if (node.data) {
        let tmp = deepClone(this.pageData)
        console.log(tmp)
        for (const i in node.data.path) {
          tmp = tmp[node.data.path[i]]
        }
        for (const j in tmp) {
          const nodeValue = deepClone(node.data.path)
          nodeValue.push(j)
          nodes.push({ label: j, leaf: tmp[j].constructor !== Object, value: j, path: nodeValue })
        }
      } else {
        for (const i in this.pageData) {
          nodes.push({ label: i, leaf: this.pageData[i].constructor !== Object, value: i, path: [i] })
        }
      }
      console.log(nodes)
      // 通过调用resolve将子节点数据返回，通知组件数据加载完成
      resolve(nodes);
    },
    editPage: function() {
      this.dialogFormVisible = true
    },
    updatePage: function() {
      const c_data = deepClone(this.configData)
      if (c_data.requests) {
        const listQuery = c_data.requests[c_data['selectRequest']]._params
        c_data['paginationItem'] = this.paginationItem
        if (c_data.paginationItem && c_data.paginationItem.hasOwnProperty('paginationPage')) {
          listQuery[c_data.paginationItem.paginationPage] = 1
        }
      }
      const data = {
        id: this.fromId, pageId: this.pageId, configData: JSON.stringify(c_data), componentName: this.componentName, pid: this.pid
      }
      xhrSetComponent(data)
        .then(resp => {
          this.$message.success('添加成功')
          this.dialogFormVisible = false
          this.reloadPage()
        })
        .catch(err => {
          this.$message.error(err)
        })
    },
    DeleteCol: function(index, data) {
      data.splice(index, 1)
    },
    loadPage: function() {
      console.log(this.fromId)
      for (const i in this.$route.meta.pageComponents) {
        if (this.$route.meta.pageComponents[i].id === this.fromId) {
          this.configData = this.$route.meta.pageComponents[i].configData
        }
      }
      this.$forceUpdate()
      console.log(this.configData)
    },
    reloadPage: function() {
      xhrGetPageComponent({ pageId: this.pageId })
        .then(resp => {
          for (const i in resp.data.list) {
            resp.data.list[i].configData = JSON.parse(resp.data.list[i].configData)
          }
          this.$route.meta['pageComponents'] = resp.data.list
          this.loadPage()
        })
        .catch(err => {
          this.$message.error(err)
        })
    },
    columnsFilter: function(filterName, value) {
      return this.columnsFilters[filterName](value)
    },
    editField: function(index) {
      console.log('编辑字段')
      this.fieldItem = this.configData.tableColumns[index]
      this.fieldItem.fieldID = index
      this.dialogFormVisible1 = true
    },
    addField: function() {
      console.log('添加字段')
      if (!this.configData.tableColumns) {
        this.configData.tableColumns = []
      }
      const tmp = deepClone(this.fieldItem)
      if (tmp.fieldID != null) {
        this.configData.tableColumns[tmp.fieldID] = tmp
      } else {
        this.configData.tableColumns.push(tmp)
      }
      this.fieldItem.fieldId = null
      this.dialogFormVisible1 = false
    },
    editScreen: function(index) {
      console.log('编辑筛选')
      this.screenItem = this.configData.selects[index]
      this.screenItem.screenID = index
      this.dialogFormVisible2 = true
    },
    addScreen: function() {
      console.log('添加筛选')
      if (!this.configData.selects) {
        this.configData.selects = []
      }
      const tmp = deepClone(this.screenItem)
      if (tmp.screenID != null) {
        this.configData.selects[tmp.screenID] = tmp
      } else {
        this.configData.selects.push(tmp)
      }
      this.screenItem.screenID = null
      this.dialogFormVisible2 = false
    },
    sendRequest: function(requests) {
      autoRequest(requests.url, requests.model, requests._params, requests._data)
        .then(resp => {
          this.pageData[requests.requestName] = resp.data
          if (requests.message.length > 0) {
            this.$message.success(requests.message + '成功')
          }
          this.$forceUpdate()
        })
        .catch(err => {
          this.$message.error(err)
        })
    },
    addRequests: function() {
      if (!this.configData.requests) {
        this.configData.requests = {}
      }
      if (!this.configData.requestNames) {
        this.configData.requestNames = []
      }
      this.configData.requests[this.requestItem.requestName] = this.requestItem
      this.configData.requestNames = []
      for (const i in this.configData.requests) {
        this.configData.requestNames.push(i)
      }
      this.dialogFormVisible3 = false
    },
    DeleteRequest: function(index, scope) {
      delete this.configData.requests[scope.row]
      this.configData.requestNames.splice(index, 1)
      console.log(this.configData)
    },
    editRequest: function(scope) {
      this.requestItem = this.configData.requests[scope.row]
      this.dialogFormVisible3 = true
    },
    daterangeChangedTimestamp() {
      const listQuery = this.configData.requests[this.configData['selectRequest']]._params
      const start = new Date(this.daterangeValue && this.daterangeValue[0])
      listQuery.startTime = `${start.getFullYear()}-${
        start.getMonth() > 8
          ? start.getMonth() + 1
          : '0' + (start.getMonth() + 1)
      }-${start.getDate() > 9 ? start.getDate() : '0' + start.getDate()}`
      // end_time 需要+1天,
      if (!this.daterangeValue || !this.daterangeValue[1]) {
        listQuery.endTime = null
      } else {
        const end = new Date(
          new Date(this.daterangeValue && this.daterangeValue[1]).getTime() +
          24 * 60 * 60 * 1000
        )
        listQuery.endTime = `${end.getFullYear()}-${
          end.getMonth() > 8 ? end.getMonth() + 1 : '0' + (end.getMonth() + 1)
        }-${end.getDate() > 9 ? end.getDate() : '0' + end.getDate()}`
      }
    },
    daterangeChanged() {
      const listQuery = this.configData.requests[this.configData['selectRequest']]._params
      if (this.daterangeValue) {
        if (this.daterangeValue[0]) {
          const startTime = this.daterangeValue[0]
          listQuery.startTime = /\d{2}:\d{2}$/g.test(startTime)
            ? new Date(startTime).getTime()
            : new Date(startTime + ' 00:00:00').getTime()
        }
        if (this.daterangeValue[1]) {
          const endTime = this.daterangeValue[1]
          listQuery.endTime = /\d{2}:\d{2}$/g.test(endTime)
            ? new Date(endTime).getTime()
            : new Date(endTime + ' 23:59:59').getTime()
        }
      } else {
        listQuery.startTime = null
        listQuery.endTime = null
      }
    },
    handleFilter() {
      const listQuery = this.configData.requests[this.configData['selectRequest']]._params
      listQuery[this.configData.paginationItem.paginationPage] = 1
      this.doSearch()
    },
    resetFilter() {
      const listQuery = this.configData.requests[this.configData['selectRequest']]._params
      const offset = listQuery[this.configData.paginationItem.paginationOffset]
      for (const key in listQuery) {
        listQuery[key] = null
      }
      listQuery[this.configData.paginationItem.paginationOffset] = offset
      listQuery[this.configData.paginationItem.paginationPage] = 1
      this.daterangeValue = ''
      console.log(listQuery)
      this.doSearch()
    },
    handleSizeChange(val) {
      const listQuery = this.configData.requests[this.configData['selectRequest']]._params
      console.log(val)
      listQuery[this.configData.paginationItem.paginationOffset] = val
      this.doSearch()
    },
    handleCurrentChangeOffset(val) {
      console.log(val)
      const listQuery = this.configData.requests[this.configData['selectRequest']]._params
      listQuery[this.configData.paginationItem.paginationPage] = val
      this.doSearch()
    },
    getDepthData(data, value) {
      if (!value || value.length === 0) {
        return null
      }
      let tmp = deepClone(data)
      for (const i in value) {
        if (!tmp[value[i]]) {
          return null
        }
        tmp = tmp[value[i]]
      }
      console.log(tmp)
      return tmp
    },
    autoRequest: function() {
      for (const key in this.configData.requests) {
        const request = this.configData.requests[key]
        if (request.isAutoRequest) {
          this.sendRequest(request)
        }
      }
    },
    getColumns: function() {
      const ls = this.getDepthData(this.pageData, this.configData['tableDataList'])
      const col = []
      if (ls === null) {
        return col
      }
      for (const name in ls[0]) {
        col.push({ key: name, value: ls[0][name] })
      }
      return col
    },
    editManipulate: function(index) {
      console.log('编辑操作')
      this.manipulateItem = this.configData.manipulates[index]
      this.manipulateItem.manipulateID = index
      this.dialogFormVisible4 = true
    },
    addManipulate: function() {
      console.log('添加操作')
      if (!this.configData.manipulates) {
        this.configData.manipulates = []
      }
      const tmp = deepClone(this.manipulateItem)
      if (tmp.manipulateID != null) {
        this.configData.manipulates[tmp.manipulateID] = tmp
      } else {
        this.configData.manipulates.push(tmp)
      }
      this.manipulateItem.manipulateID = null
      this.dialogFormVisible4 = false
    }
  }
}
</script>

<style scoped>

</style>

